<template>
        <div>
            <bfe-table :data="listData" v-if="columns && columns.length" v-loading="loading" border :height="tabHeight" highlight-current-row @row-click="onRowClick" :row-class-name="tableRowClassName">
                <bfe-table-column width="60">
                    <template slot-scope="scope">
                        <bfe-radio :label="scope.$index" v-model="selectVal"></bfe-radio>
                    </template>
                </bfe-table-column>
                <template v-for="(column, i) in columns">
                    <slot :name="`col_${column.prop}_before`" :col="column"></slot>
                    <bfe-table-column :prop="column.prop" :label="$t(column.label)" :key="i" :min-width="column.width ? column.width : 120" show-overflow-tooltip></bfe-table-column>
                    <slot :name="`col_${column.prop}_after`" :col="column"></slot>
                </template>
            </bfe-table>
            <bfe-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNo"
                :page-sizes="[15, 30, 45, 60, 100]"
                :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
            </bfe-pagination>
        </div>
    </template>
    
    <script>
    
    export default {
        props: {
            columns: {
                type: Array,
                default: () => []
            },
            hasSearch: {
                type: Boolean,
                default: false
            },
            searchObj: {
                type: Object,
                default: () => {}
            },
            tabHeight: {
                type: Number,
                default: document.body.clientHeight * 0.7 - 156
            },
            api: {
                type: String,
                default: '',
            },
            optCode: {
                type: String,
                default: '',
            }
        },
        data(){
            return{
                pageInfo:{
                    pageNo: 1,
                    pageSize: 15,
                    total: 0,
                },
                listData: [],
                selectVal: null,
                loading: false,
                selectObj: {},
                showFlag: false,
                title: '',
                getDataFlag: false
            }
        },
        mounted() {
            this.getDataFlag = false
            this.pageInfo = {
                pageNo: 1,
                pageSize: 15,
                total: 0,
            }
            this.listData = []
            this.selectObj = {}
            this.selectVal = null
            setTimeout(() => {
                this.getDataFlag = true
            }, 10)
            !this.hasSearch && this.getPageData()
        },
        methods:{
            tableRowClassName(row, rowIndex){
                row.index = rowIndex
            },
            onRowClick(row){
                this.selectVal = row.index
                this.selectObj = row
            },
            handleSizeChange(val){
                this.pageInfo.pageNo = 1
                this.pageInfo.pageSize = val
                this.getDataFlag && this.getPageData()
            },
            handleCurrentChange(val){
                this.pageInfo.pageNo = val
                this.getDataFlag && this.getPageData()
            },
            getPageData(){
                this.loading = true
                const {pageNo, pageSize} = this.pageInfo
                const params = {
                    optCode: this.optCode,
                    payload: {
                        ...this.searchObj
                    },
                    pageInfo: {
                        pageNo,
                        pageSize
                    }
                }
                this.$p2svr(this.$api[this.api] , 'RequestPoAuth', params).then(res => {
                    const {payload, pageInfo: {total}} = res
                    this.listData = res.payload || []
                    this.pageInfo.total = total || 0
                }).finally(() => {
                    this.loading = false
                    this.$emit('removeLoading')
                })
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    /deep/.giop-pagination{
        margin-top: 16px;
    }
    </style>
    